<template>
	<mescroll-uni ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback"
		:down="downOption" :up="upOption">
	<view class="box ">
		<view class="order-con" v-for="(item,index) in orderList">
			<view class="flex-s onebox">
				<shop-title :shop="item.shop"></shop-title>
				<view :class="item.order_status == 4 ? 'muted' : 'primary'">
					<template v-if="item.delivery_type != 2">
						<!-- {{getOrderStatus(item.order_status)}}333 -->
						{{item.order_status_desc}}
					</template>
					<template v-else>
						{{item.order_status_desc}} 
					</template>
				</view>
			</view>
			<view class="" @click="apifun.navigate('/pages/mine/order_details?id='+item.id)">
				<order-goods :list="item.order_goods" :isJumpGoods="false"></order-goods>
			</view>
			
			<view class="flex-s">
				<view class=" flex-start GZbox">
					<image class="avatar" :src="item.user_info.avatar" mode=""></image>
					<view class="nickname">{{item.user_info.nickname}}</view>
				</view>
				<view class="all-price flex row-right" style="margin-right: 20rpx;">
					<text class="muted xs">共{{item.goods_count}}件商品，实付款：</text>
					<price-format weight="500" :subscript-size="30" :first-size="30" :second-size="30"
						:price="item.order_amount"></price-format>
				</view>
			</view>
		</view>
	</view>
	</mescroll-uni>
</template>

<script>
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	import MescrollMoreItemMixin from "@/components/mescroll-uni/mixins/mescroll-more-item.js";
	import {
		firstlists,
	} from '@/api/order';
	export default {
		mixins: [MescrollMixin, MescrollMoreItemMixin],
		data() {
			return {
				downOption: {
					auto: true // 不自动加载 (mixin已处理第一个tab触发downCallback)
				},
				upOption: {
					auto: false, // 不自动加载
					noMoreSize: 4, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
					empty: {
						icon: '/static/image/order_null.png',
						tip: '暂无订单~', // 提示
						fixed: true
					}
				},
				orderList:[],
				sntype:'',
			}
		},
		onLoad() {
			this.type = Number(this.$Route.query.type)
			if(this.type==0){
				this.sntype = 'day_deposit'
			}else{
				this.sntype = 'wait_deposit'
			}
			this.getData()
		},
		methods: {
			async getData() {
				let res = {}
				switch (this.type) {
					case 0: 
						uni.setNavigationBarTitle({
							title: '已付定金'
						});
						// res = await getServerProto();
						break;
					case 1:
						uni.setNavigationBarTitle({
							title: '待处理'
						});
						// res = await getPrivatePolicy();
						break;
				}
				// console.log('res.code',res.code)
				// if(res.code == 1) {
				// 	 this.content = res.data.content;
				// 	 console.log('content',this.content)
				// }
			},
			upCallback(page) {
				let pageNum = page.num; // 页码, 默认从1开始
				let pageSize = page.size; // 页长, 默认每页10条
				let {
					orderType,
				} = this;
				firstlists({
					page_size: pageSize,
					page_no: pageNum,
					type: this.sntype, 
				}).then(({
					data
				}) => {
					let curPageData = data.list;
					let curPageLen = curPageData.length;
					let hasNext = !!data.more;
					if (page.num == 1) this.orderList = [];
					this.orderList = this.orderList.concat(curPageData);
					this.mescroll.endSuccess(curPageLen, hasNext);
				})
			},
		}
	}
</script>

<style lang="scss">
	.order-list {
		min-height: calc(100vh - 80rpx);
		padding: 0 20rpx;
		overflow: hidden;

		.order-item {
			border-radius: 10rpx;

			.order-header {
				height: 80rpx;
				padding: 0 24rpx;
				border-bottom: 1px dotted #E5E5E5;
			}

			.all-price {
				text-align: right;
				padding: 0 24rpx 20rpx;
			}

			.order-footer {
				height: 100rpx;
				border-top: $-solid-border;
				padding: 0 24rpx;

				.plain {
					border: 1px solid #BBBBBB;

					&.red {
						border-color: $-color-primary;
					}

				}
			}
		}
	}
	.ordernavmain {
		width: 65%;
		display: flex;
		justify-content: space-between;
		margin: 0 auto;
		margin-top: 18rpx;
	}
	.ordereach {
		position: relative;
		color: #0A0A0A;
		font-size: 28rpx;
		width: 130rpx;
		padding: 4rpx 0;
		text-align: center;
		border-radius: 40rpx;
	}
	.activenav {
		color: #fff;
		background-color: #f6335e;
	}
	.activenav1::after {
		font-size: 34rpx;
		position: absolute;
		left: 50%;
		top: 46rpx;
		content: "";
		display: block;
		width: 60rpx;
		margin-left: -30rpx;
		height: 4rpx;
		background-color: #f3430e;
		border-radius: 2rpx;
	}
	.idinfo{
		background-color: #fff;
		padding: 20rpx;
	}
	.popup_box{
		background-color: #fff;
		border-radius: 14rpx;
		padding: 26rpx 0;
		box-sizing: border-box;
	}
	.text_info{
		text-align: center;
		font-size: 32rpx;
		margin: 20rpx;
		font-weight: bold;
	}
	.fwname{
		width: 400rpx;
		font-size: 30rpx;
	}
	.assign{
		background-color: #f5335e;
		padding: 8rpx 16rpx;
		color:#ffffff;
		border-radius: 8rpx;
		margin-left: 20rpx;
	}
	.yybox{
		font-size: 24rpx;
		color: #878787;
	}
	.yyname{
		margin-right: 38rpx;
	}
	.GZbox{
		margin-bottom: 16rpx;
		margin-left: 20rpx;
	}
	.nickname{
		font-size: 24rpx;
		margin-left: 16rpx;
	}
	.avatar{
		width: 46rpx;
		height: 46rpx;
		border-radius: 50rpx;
	}
	.box{
		margin: 0 22rpx;
	}
	.onebox{
		padding: 0 22rpx;
		border-bottom: 1rpx solid #e5e5e5;
	}
	.order-con{
		border-radius: 10rpx;
		background-color: #fff;
		margin-bottom: 24rpx;
	}
</style>

